<template>
  <div class="panel">
    <PanelTitle title="粘贴文本"></PanelTitle>  
    <div class="panel-body" style="height: 20em"> 
      <div>
        <textarea placeholder="在这里粘贴文本" 
        placeholderfont="1px" v-model="picfile"
          style="width: 100% ;height: 18em"             
            rows="10"
            cols="50"
          @paste="handlePaste">
        </textarea>
      </div>
    </div>
    <PanelTitle title="错误列表"></PanelTitle>
    <div>
      <el-table
        size="mini"
        :data="tableData"
        border
        style="width: 100%; "
        highlight-current-row
      >
        <el-table-column
          prop="rank"
          label="排名"
          align="center"
          min-width="5%"
        >
          <template slot-scope="scope">
                {{scope.$index+1+(clients.current-1)*clients.size}} 
              </template>
          </el-table-column>
     
        <el-table-column
          prop="skuCode"
          label="用友sku"
          align="center"
          min-width="20%"
        >
        </el-table-column>
        
        <el-table-column
          prop="oldSkuCode"
          label="老skuCode"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="platform"
          label="platform"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="store"
          label="store"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="site"
          label="site"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="warehouseCode"
          label="仓库code"
          align="center"
          min-width="10%"
        >
        </el-table-column>
      
        <el-table-column
          prop="qty"
          label="单据占用"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="billNo"
          label="单据号"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="bizType"
          label="占用类型"
          align="center"
          min-width="10%"
        >
        </el-table-column>
      
        <el-table-column
          prop="createTime"
          label="时间"
          align="center"
          min-width="15%"
          :show-overflow-tooltip="true">
      
        </el-table-column>
        <el-table-column
          fixed="right"
          label="分析"
          align="center"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="jumpToDetail(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 2%;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="clients.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="clients.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="clients.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import PanelTitle from '@/components/PanelTitle.vue'
  import {InventoryServcie} from '@/utils/api'
  import moment from 'moment'

  export default {
    data() {
    return {
      picfile : "",
      tableData: [
        // 表格数据
      ],
      rowIndex: 0,
      columnIndex: 0,
      clients: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
          records: []
        },
        };
     },
    components: {
      PanelTitle
    },
    created() {
      // this.getTopicPageData()
    },
    methods: {
      //获取数据  
      cellClick(row, column) {
        this.rowIndex = row.index;
        this.columnIndex = column.index;
      },
      cellClassName({ row, column, rowIndex, columnIndex }) {
        row.index = rowIndex;
        column.index = columnIndex;
      },
      handleSizeChange(val) {
        this.clients.pageSize = val
        this.getTopicPageData()
      },
      handleCurrentChange(val) {
        this.clients.pageNo = val
        this.getTopicPageData()
      },
      dateFormat(dateTime) {
        if (dateTime == undefined) {
          return "";
        }
        return moment(Number(dateTime)).format("YYYY-MM-DD HH:mm:ss");
      },
      add(a,b,c){
        return a+b+c
      },
      cleanSearch() {
        // this.skuCode = null
        // this.oldSkuCode = null
        // this.whCode = null
        this.searchCrawlDate = []
      },
      handlePaste(event) {
      this.images = [];
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];
          console.log(item);
          if (item.type === 'text/plain') {
          item.getAsString(text => {
          console.log('Pasted content:', text);
              // 将文本内容按行和制表符分割，转换为二维数组
          let pastedText = text.split('\n').map((row) => { return row.split('\t').map((ele) => { return parseFloat(ele) }) });
          // 初始化一个对象，用于匹配表格的列数据。
          let object = {
            data1: null,
            data2: null,
            data3: null,
            data4: null,
          }
            console.log(pastedText)
            // 遍历处理每一行数据，根据行索引和列索引将数据填充到表格中。
            pastedText.forEach((ele1, index) => {
              if (this.rowIndex + index <= this.tableData.length - 1) {
                let item = JSON.parse(JSON.stringify(this.tableData[this.rowIndex + index]))
                let num = 0;
                let keyIndex = 0;
                // 使用循环和条件判断，将处理后的数据按列索引填充到克隆的行对象中
                for (var key in object) {
                  if (num < ele1.length && keyIndex >= this.columnIndex) {
                    item[key] = ele1[num] || ele1[num] == 0 ? ele1[num] : null
                    // 使用this.$set()将更新后的行对象设置回表格数据中
                    this.$set(this.clients.records, this.rowIndex + index, item)
                    num++;
                  }
                  keyIndex++;
                }
              }
            })
          });
         
      
          }
          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            this.uploadImage(file);
            const url = URL.createObjectURL(file);
            this.images.push(url);
          }
        }
      }
    },
      jumpToDetail(id) {
        this.$router.push({
          name: 'consensusDetail',
          query: {id: id}
        })
        this.$store.commit('selectMenu', {
          title: "话题分析",
          path: "/consensus/detail",
          name: 'consensusDetail',
          icon: "el-icon-date",
        })
      },
      
    },
  }
</script>

<style>
  .line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

   /* 设置滚动条的样式 */
   .textarea::-webkit-scrollbar {
    width: 2px;
  }
  /* 滚动槽 */
  .textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
  }
</style>
